<template>
  <div>
    <span v-if="showWhole">
      <el-switch v-model="all" :active-text="$t('On')" :inactive-text="$t('Off')" @change="changeAll"></el-switch>
    </span>
    <div v-if="showList">
      <div v-for="(item,index) in list" :key="'lights_'+index">
        <el-button-group v-if="item.code">
          <el-button v-if="item.message.Light1 === 'ON'" type="primary" @click="onOperate(item.devMac,1,false)">
            #1{{ $t('Off') }}
          </el-button>
          <el-button v-else @click="onOperate(item.devMac,1,true)">#1{{ $t('On') }}</el-button>
          <el-button v-if="item.message.Light2 === 'ON'" type="primary" @click="onOperate(item.devMac,2,false)">
            #2{{ $t('Off') }}
          </el-button>
          <el-button v-else @click="onOperate(item.devMac,2,true)">#2{{ $t('On') }}</el-button>
          <el-button v-if="item.message.Light3 === 'ON'" type="primary" @click="onOperate(item.devMac,3,false)">
            #3{{ $t('Off') }}
          </el-button>
          <el-button v-else @click="onOperate(item.devMac,3,true)">#3{{ $t('On') }}</el-button>
          <el-button v-if="haveOff" @click="onOperate(item.devMac,0,true)">{{ $t('On') }}</el-button>
          <el-button v-if="haveOn" type="primary" @click="onOperate(item.devMac,0,false)">{{ $t('Off') }}</el-button>
        </el-button-group>
      </div>
    </div>
  </div>
</template>
<script>
  import Common from './common'
  export default {
    name: "Light",
    mixins: [Common],
    data() {
      return {}
    },
    computed: {
      haveOn() {
        const {
          Light1,
          Light2,
          Light3
        } = this.device.message
        return Light1 === 'ON' || Light2 === 'ON' || Light3 === 'ON'
      },
      haveOff() {
        const {
          Light1,
          Light2,
          Light3
        } = this.device.message
        return Light1 === 'OFF' || Light2 === 'OFF' || Light3 === 'OFF'
      },
    },
    methods: {
      onOperate(DevMac, num, onOff) {
        const Message = {}
        if (num > 0) {
          Message['Light' + num] = onOff ? 'ON' : 'OFF'
        } else if (num === 0) {
          Message['Light1'] = onOff ? 'ON' : 'OFF'
          Message['Light2'] = onOff ? 'ON' : 'OFF'
          Message['Light3'] = onOff ? 'ON' : 'OFF'
        }
        const content = {
          PackageType: 0,
          DeviceControl: {
            DevMac,
            Message
          }
        }
        this.deviceCommand('control', JSON.stringify(content))
      },
      changeAll() {
        for (var i = 0; i < this.list.length; i++) {
          const item = this.list[i]
          this.onOperate(item.devMac, 0, this.all)
        }
      }
    }
  }

</script>
